<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
  <title>文档编辑</title>
  <!--标准mui.css-->
  <link rel="stylesheet" href="../css/mui.min.css" />
  <script src="../js/mui.min.js"></script>
  <!--App自定义的css-->
  <link rel="stylesheet" type="text/css" href="../css/app.css" />
  <script src="../js/vue.js"></script>
  <script src="../js/jquery-3.6.0.min.js"></script>
  <script src="../js/vconsole.min.js"></script>
  <script src="../js/sm2.js"></script>
  <script src="../js/sm3.js"></script>
  <script src="../js/feedback.js"></script>
  <script src="../js/clipboard.js"></script>
  <script src="../js/flexible.js"></script>
  <script src="../wx/uap.js"></script>
  <link rel="stylesheet" href="../css/vant.mini.css">
  <script src="../js/vant.mini.js"></script>
  <script src="./text.js" type="text/javascript"></script>
  <script type="text/javascript" src="http://27.86.110.162:18080/changxieoffice/web-apps/apps/api/documents/api.js"></script>
  <style>
    .trainTicketstitle {
      background-color: #ffffff;
      /* background-image: linear-gradient(to right,
          rgb(13, 121, 131),
          rgb(25, 179, 182)); */
      padding: 0.3rem 0.2rem;
      color: #1e3754;
      height: 1rem;
      font-size: 0.35rem;
      box-shadow: 0px 8px 8px rgba(4, 124, 137, 0.05);
    }

    #app {
      background-color: #ffffff;
    }

    .mui-btn-blue,
    .mui-btn-primary,
    input[type="submit"] {
      background-color: rgb(25, 179, 182);
      color: #fff;
      border: 1px solid rgb(25, 179, 182);
      border-radius: 4px;
      margin-right: 10px;
    }

    .left {
      text-align: center;
    }

    .left a {
      line-height: 0.5rem;
      color: #1e3754;
    }

    .left .left1 {
      position: absolute;
      left: 0.1rem;
      top: 0.25rem;
    }

    .left :nth-child(1) span {
      line-height: 0.5rem;
      color: #fff;
    }

    .left :nth-child(2) span {
      line-height: 0.5rem;
      color: #fff;
    }

    .file-input {
      opacity: 0;
      height: 100%;
      width: 100%;
      z-index: 999;
      position: absolute;
      left: 0;
      top: 0;
    }

    .top {
      height: 4.5rem;
      width: 100%;
      box-sizing: border-box;
      font-size: 0.3rem;
      position: relative;
      border-radius: 10px;
      margin-bottom: 0.3rem;
      position: relative;
      margin-top: 0.6rem;
    }

    .mui-content {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
    }

    .functionsif {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0 10px;
    }

    .single {
      width: 85px;
      height: 120px;
      background-color: rgba(236, 243, 255, 0.6);
      border-radius: 10px;
      text-align: center;
      padding: 20px 0;
      margin: 5px 0;
      font-size: 12px;
    }
   
  </style>
</head>

<body>
  <div id="app">
    <div class="is-loading">
      <div class="curtain">
        <div class="loadingBgc">
          <div class="loader"></div>
          <!-- <p class='loadingF'>正在识别</p> -->
        </div>
      </div>
    </div>
    <div class="trainTickets">
      <div class="trainTicketstitle">
        <div class="arrow clearfix">
          <div class="left">
            <span class="left1" @click="home">
              <a class="
                    mui-action-back mui-icon mui-icon-left-nav mui-pull-left
                  "></a>
            </span>
            <span style="font-weight: 600">文档编辑</span>
           <div>
            <img @click="mailbox" style="width: 20px;position: absolute; right: 0.25rem; top: 0.25rem;"
            src="../image/mailbox.png" alt="">
           </div>
          </div>
        </div>
      </div>
      <div class="mui-content">
        <div id="placeholder"></div>
      </div>
    </div>
  
  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          front: "", 
          back: "",
          active: 1,
          addedPreviewFile: "", //上传图片的base64
          timestamp: "", //时间戳
          accesstoken: "", //token
          flag: false,
          srcUrl: '',
        };
      },
      created() {
        let AuthenticationSession = sessionStorage.getItem("Authentication");
        console.log(77,AuthenticationSession)
        
      },
      mounted() {
        this.baidu()
      },
      methods: {
      getTok(fileType,fileId,userId) {
       let timestamp = new Date().getTime() + "";
       let data = {
            fileType:fileType,
            fileId:fileId,
            userId:userId,
            timestamp: timestamp,
      };
      data = JSON.stringify(data);
      let sign = sm3(data);
      var tokenIn = ''
      let AuthenticationSession = sessionStorage.getItem("Authentication");
      $.ajax({
        url: localUrlLink + iscp_port + '/document/transform/getDocumentToken',
        type: "post",
        async: false, //是否同步，false表示同步请求
        dataType: "json",
        data: data,
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          Authentication: AuthenticationSession,
          sign: sign,
          timestamp: timestamp
        },
        success: (res, txt, xhr) => {
          if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
            let Authentication = xhr.getResponseHeader("Authentication")
            if (res.code == 200) {
              console.log(Authentication,'Authentication')
              sessionStorage.setItem("Authentication", Authentication);
              console.log(res.resultValue,222)
              tokenIn = res.resultValue
            } else {
              mui.toast(res.resultValue, {
                duration: 1000,
                type: 'div'
              })
            }
          } else {
            mui.toast('完整性校验失败', {
              duration: 1000,
              type: 'div'
            })
          }
        },
        error: (e) => {
          $(".curtain").css("display", "none");
          mui.toast('请求异常,请稍后再试', {
            duration: 1000,
            type: 'div'
          })
        },
      });
      return tokenIn
    },
        home() {
          var url = location.search; //获取url中"?"符后的字串 ('?modFlag=business&role=1')
          console.log(url, 206);
          if (url.split("=")[1] == "one") {
            $(location).attr("href", "newFile.html");
          } else {
            $(location).attr("href", "Home.html");
          }
        },
        // 编辑页面
        baidu() {
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          } else {
            iscp_port = "";
          }
          var params = new URLSearchParams(window.location.search);
          console.log(window.location, 201);
          console.log(window.location.search, 221);
          console.log(params, 231);
          var id = params.get("id"); // 获取id参数值
          var type = params.get("type"); // 获取id参数值
          userId = sessionStorage.getItem("userId")
          console.log(id, 241);
          console.log(type, 251);
          // if (params.get("url")) {
          //   urlList = params.get("url"); // 获取id参数值
          //   console.log(urlList, 'urlList'); // 输出：123
          //   // const url = urlList
          // } else {
          //   urlList = localUrlLink + iscp_port + '/document/record/documentLoad?id=' + id + '&userId=' + sessionStorage.getItem("userId")
          // }
         
          // if (params.get("callList")) {
          //   var callList = params.get("callList"); // 获取id参数值
          //   console.log(callList, 'callList'); // 输出：123
          //   callListkUrl = callList
          // }else {
          //   callListkUrl = localUrlLink + iscp_port + '/document/transform/callback'
          // }
          let fileTy = ''
          if (params.get('fileType')) {
            var fileType = params.get('fileType')
            fileTy = fileType
          } else {
            var suffix = params.get("suffix").split(".");
            console.log(suffix, 234); // 输出：example
            fileTy = suffix[1]
          }
           let token = this.getTok(id,type,userId)
           let Authentication = sessionStorage.getItem("Authentication");
           let callListkUrl = ''
          callListkUrl = localUrlLink + iscp_port + `/document/transform/callback?userId=${userId}`
          let urlList = ''
          urlList = localUrlLink + iscp_port + `/document/record/documentLoad?id=${id}&userId=${userId}`
          var config = {
            "document": {
              // 指明要打开的具体文件类型
              "fileType": fileTy,
              // 文档唯一ID
              "key": id,
              // 文档标题名称
              "title": "DocumentTitle",
              // 文档存放路径
              "url": urlList,
              "permissions": {
                // 指定文档是否能编辑
                "edit": true,
                "canSetTypeData": true,
                // "partauth":{

                // }
              }
            },
            // 指明文档类型：word、cell、slide
            "documentType": type,
            "token":token,
            "height": "100%",//设置文档编辑器在浏览器中的高度，默认"100%"
            "width": "100%",//设置文档编辑器在浏览器中的宽度，默认"100%"
            // 设置平台类型：PC:desktop;手机端：mobile
            "type": "mobile",
            "editorConfig": {
              // 指定文档打开模式，只读：view,编辑：edit
              "mode": "edit",
              // 回调接口地址
              "callbackUrl": callListkUrl,
              // 前端参数配置
              "customization": {
                // 指定文档缩放大小，0-100，
                // 文字处理和演示文稿可以设置为-1（文档适应页面）或-2（文档页面适应编辑页面）
                "zoom": 0,
              }
            }
          };
          console.log(config, 218);
          var docEditor = new CXO_API.CXEditor("placeholder", config);
        },
        // 发送邮箱
        mailbox() {
          var btnArray = ["取消", "确定"];
      var i = 0;
      mui.confirm("请问是否发送内网邮箱？", "消息提醒", btnArray, (e) => {
        if (i > 0) return;
        i++;
        if (e.index == 1) {
          this.sendMail(this.id)
        }
      });
          // this.show = true
          // return
        },
        sendMail() {
          console.log('发送邮箱');
          $(".curtain").css("display", "block");
          // return
          var params = new URLSearchParams(window.location.search);
          console.log(params, 211);
          var id = params.get("id"); // 获取id参数值
          let timestamp = new Date().getTime() + "";
          let data = {
            timestamp: timestamp,
            id: id,
          };
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          } else {
            iscp_port = "";
          }

          data = JSON.stringify(data);
          let sign = sm3(data);
          let AuthenticationSession = sessionStorage.getItem("Authentication");
          $.ajax({
            url: localUrlLink + iscp_port + '/document/email/sendMail',
            type: "post",
            async: false, //是否同步，false表示同步请求
            dataType: "json",
            data: data,
            headers: {
              "Content-Type": "application/json;charset=UTF-8",
              Authentication: AuthenticationSession,
              sign: sign,
              timestamp: timestamp
            },
            success: (res, txt, xhr) => {
              console.log(res, "res发送邮箱")
              $(".curtain").css("display", "none");
              if (sm3(res.resultValueStr) == xhr.getResponseHeader("sign")) {
                let Authentication = xhr.getResponseHeader("Authentication")
                if (res.code == 200) {
                  console.log(Authentication, 'Authentication发送邮箱')
                  mui.toast("发送成功", {
                    duration: 'long',
                    type: 'div'
                  })
                  setTimeout(() => {
                    this.home()
                  }, 1000);
                } else  {
                  mui.toast(res.resultValue, {
                    duration: 1000,
                    type: 'div'
                  })
                }
              } else {
                mui.toast('完整性校验失败', {
                  duration: 1000,
                  type: 'div'
                })
              }
            },
            error: (e) => {
              $(".curtain").css("display", "none");
              mui.toast('请求异常,请稍后再试', {
                duration: 1000,
                type: 'div'
              })
            },
          });
        },
      },
    });
  </script>
</body>

</html>

<body></body>